<template>
  <su-fixed bottom placeholder bg="bg-white">
    <view class="ui-tabbar-box">
      <view class="ui-tabbar ss-flex ss-col-center ss-row-between">
        <view
            v-if="serviceIcon"
            class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
            @tap="onFavorite"
        >
          <button class="ss-reset-button customer-service-btn" open-type="contact">
            <image
                class="item-icon"
                src="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/客服 (2).png"
                mode="aspectFit"
            ></image>
            <view class="item-title">客服</view>
          </button>
        </view>

        <view
            v-if="collectIcon"
            class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
            @tap="toCart()"
        >
          <image
              class="item-icon"
              src="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/2025/09/188c305a54b2bf4ee38f8efdbc771117d7购物车满.png"
              mode="aspectFit"
          ></image>
          <view class="item-title">购物车</view>
        </view>

        <view
            v-if="shareIcon"
            class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
        >
          <button class="ss-reset-button customer-service-btn" open-type="share">
            <image
                class="item-icon"
                src="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/miniFont/分享.png"
                mode="aspectFit"
            ></image>
            <view class="item-title">分享</view>
          </button>
        </view>
        <slot></slot>
      </view>
    </view>
  </su-fixed>

</template>

<script setup>
/**
 *
 * 底部导航
 *
 * @property {String} bg            - 背景颜色Class
 * @property {String} ui            - 自定义样式Class
 * @property {Boolean} noFixed          - 是否定位
 * @property {Boolean} topRadius        - 上圆角
 *
 *
 */

import {computed} from 'vue';
import sheep from '@/sheep';
import {onLoad} from '@dcloudio/uni-app';

// 接收参数
const props = defineProps({
  modelValue: {
    type: Object,
    default() {
    },
  },
  bg: {
    type: String,
    default: 'bg-white',
  },
  bgStyles: {
    type: Object,
    default() {
    },
  },
  ui: {
    type: String,
    default: '',
  },

  noFixed: {
    type: Boolean,
    default: false,
  },
  topRadius: {
    type: Number,
    default: 0,
  },
  collectIcon: {
    type: Boolean,
    default: true,
  },
  serviceIcon: {
    type: Boolean,
    default: true,
  },
  shareIcon: {
    type: Boolean,
    default: true,
  },
});
const elStyles = computed(() => {
  return {
    'border-top-left-radius': props.topRadius + 'rpx',
    'border-top-right-radius': props.topRadius + 'rpx',
    overflow: 'hidden',
  };
});
onLoad((opt) => {
  onShare()
})
async function onShare() {
  wx.showShareMenu({
    menus: ['shareAppMessage', 'shareTimeline'],
  });
}

async function onFavorite() {
}

// 微信好友分享 - 注意：在组件中需要通过defineExpose暴露
function onShareAppMessage() {
  if (!props.modelValue || !props.modelValue.product) {
    return {
      title: '快来看看这个好物！',
      path: '/pages/goods/detail'
    };
  }

  const product = props.modelValue.product;

  return {
    title: product.name || '快来看看这个好物！',
    path: `/pages/goods/detail?id=${product.id}`,
    imageUrl: product.pic || ''
  };
}

// 分享到朋友圈 - 注意：在组件中需要通过defineExpose暴露
function onShareTimeline() {
  if (!props.modelValue || !props.modelValue.product) {
    return {
      title: '快来看看这个好物！',
      query: ''
    };
  }

  const product = props.modelValue.product;

  return {
    title: product.name || '快来看看这个好物！',
    query: `id=${product.id}`,
    imageUrl: product.pic || ''
  };
}

// 跳转购物车
const toCart = () => {
  sheep.$router.go('/pages/index/cart');
}

defineExpose({
  onShareAppMessage,
  onShareTimeline
});
</script>

<style lang="scss" scoped>
.ui-tabbar-box {
  box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
}

.ui-tabbar {
  display: flex;
  height: 50px;
  background: #fff;

  .detail-tabbar-item {
    width: 100rpx;

    .item-icon {
      width: 40rpx;
      height: 40rpx;
    }

    .item-title {
      font-size: 20rpx;
      font-weight: 500;
      line-height: 20rpx;
      margin-top: 12rpx;
    }
  }
}

.customer-service-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.customer-service-btn::after {
  display: none;
}

/* 自定义分享弹窗样式 */
.custom-share-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.custom-share-modal-content {
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx 0;
  box-sizing: border-box;
}

.custom-share-title {
  text-align: center;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 30rpx;
}

.custom-share-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 30rpx;
}

.custom-share-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.custom-share-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

.custom-share-icon image {
  width: 60rpx;
  height: 60rpx;
}

.custom-share-text {
  font-size: 24rpx;
  color: #666;
}

.custom-share-cancel {
  text-align: center;
  font-size: 28rpx;
  color: #333;
  padding: 20rpx 0;
  border-top: 1rpx solid #eee;
  margin-top: 10rpx;
}
</style>
